<template>
  <div>
    <div class="choose">
      <div class="box">
        <span class="leftWord">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          @click="handleStatus"
          type="success"
          icon="el-icon-edit"
          size="small"
          >新增试题</el-button
        >
      </div>
      <el-form
        :model="questionForm"
        ref="questionForm"
        label-width="80px"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="questionForm.subjectID"
                placeholder="请选择"
                style="width: 100%"
                @change="getSubSonList(questionForm.subjectID)"
              >
                <el-option
                  v-for="item in subList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="questionForm.region"
              >
                <el-option
                  v-for="item in subSonList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                v-model="questionForm.tags"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in tage"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                v-model="questionForm.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                v-model="questionForm.questionType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in questionType"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                v-model="questionForm.difficulty"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                v-model="questionForm.direction"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                v-model="questionForm.creatorID"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in UserList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="questionForm.remarks"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="questionForm.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-col :span="12">
                <el-select
                  v-model="questionForm.province"
                  placeholder="请选择"
                  style="width: 100%"
                  @change="handleProvince"
                >
                  <el-option
                    v-for="item in citySelect.province"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-select
                  v-model="questionForm.city"
                  placeholder="请选择"
                  style="width: 100%"
                  @keyup.enter="handleFilter"
                  filterable
                >
                  <el-option
                    v-for="item in citySelect.cityDate"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="clearnHandler">清除</el-button>
              <el-button type="primary" @click="submitHandler">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { simple as dirSimple } from '@/api/hmmm/directorys'
import { simple as simpleTag } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { questionType, direction, difficulty } from '@/api/hmmm/constants'
import { simple as simpleUser } from '@/api/base/users'
export default {
  name: 'QuestionsChoose',

  data () {
    return {
      questionForm: {
        subjectID: null,
        region: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null
      },
      subList: [],
      subSonList: [],
      UserList: [],
      tage: '',
      questionType,
      direction,
      difficulty,
      citySelect: {
        province: [],
        cityDate: []
      }
    }
  },
  created () {
    this.getSubList()
    this.getUserList()
    this.getCityData()
  },

  methods: {
    handleStatus () {
      this.$router.push({ path: '/questions/new' })
    },
    async getSubList () {
      const res = await simple()
      if (res.status !== 200) return
      this.subList = res.data
    },
    async getSubSonList (id) {
      const res = await dirSimple({ subjectID: id })
      this.subSonList = res.data
      const result = await simpleTag({ subjectID: id })
      this.tage = result.data
    },
    async getUserList () {
      const res = await simpleUser()
      this.UserList = res.data
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.questionForm.city = this.citySelect.cityDate[0]
    },
    // 清除按钮
    clearnHandler () {
      this.questionForm = {
        subjectID: null,
        region: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null
      }
      this.$emit('clear', this.questionForm)
    },
    // 搜索按钮
    submitHandler () {
      this.$emit('serch', this.questionForm)
    }
  }
}
</script>

<style lang="scss" scoped>
.choose {
  .box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .leftWord {
      font-size: 12px;
      color: pink;
    }
  }
}
</style>
